<template>
  <VRow
    no-gutters
    class="auth-wrapper"
  >
    <VCol
      md="8"
      class="d-none d-md-flex position-relative"
    >
      <div class="logo-box">
        <img src="@/assets/images/logo-single.png" style="width: 50px;" alt="">
        <div class="logo-title">Athena</div>
      </div>
      <div class="bg-box">
      </div>
    </VCol>

    <VCol
      cols="12"
      md="4"
      class="auth-card-v2 d-flex align-center justify-center"
      style="background-color: rgb(var(--v-theme-surface));"
    >
      <VCard
        flat
        :max-width="500"
        class="mt-12 mt-sm-0 pa-4"
      >
        <VCardText>
          <h4 class="text-h4 mb-1">
            欢迎使用 <span class="text-capitalize">Athena!</span> 👋🏻
          </h4>
        </VCardText>
        <VCardText>
          <VForm
            ref="refVForm"
            @submit.prevent="onSubmit"
          >
            <VRow>
              <VCol cols="12">
                <VSelect  v-model="form.userType"
                          :items="apexList"
                          item-title="title"
                          item-value="value"
                          placeholder="请选择性别"
                          label="登录平台"
                >

                </VSelect>
              </VCol>
              <!-- email -->
              <VCol cols="12">
                <VTextField
                  v-model="form.email"
                  label="账号"
                  placeholder="请输入账号"
                  autofocus
                  :rules="[requiredValidator]"
                  :error-messages="errors.email"
                />
              </VCol>

              <!-- password -->
              <VCol cols="12">
                <VTextField
                  v-model="form.password"
                  label="密码"
                  placeholder="请输入密码"
                  :rules="[requiredValidator]"
                  :type="isPasswordVisible ? 'text' : 'password'"
                  :error-messages="errors.password"
                  :append-inner-icon="isPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
                  @click:append-inner="isPasswordVisible = !isPasswordVisible"
                />
                <VBtn
                  style="margin-top: 24px;"
                  block
                  type="submit"
                >
                  Login
                </VBtn>
              </VCol>
            </VRow>
          </VForm>
        </VCardText>
      </VCard>
    </VCol>
  </VRow>
</template>

<script setup>
import login from '@/api/login'
import authV2LoginIllustrationBorderedDark from '@images/pages/auth-v2-login-illustration-bordered-dark.png'
import authV2LoginIllustrationBorderedLight from '@images/pages/auth-v2-login-illustration-bordered-light.png'
import authV2LoginIllustrationDark from '@images/pages/auth-v2-login-illustration-dark.png'
import authV2LoginIllustrationLight from '@images/pages/auth-v2-login-illustration-light.png'
import authV2MaskDark from '@images/pages/mask-v2-dark.png'
import authV2MaskLight from '@images/pages/mask-v2-light.png'
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import useUserStore from '@/store/modules/user'

import showTost from "@/components/toast/index.js";
import { ElMessage } from 'element-plus'
import storage from '@/utils/storage'
import {ref} from 'vue'
const title = import.meta.env.VITE_APP_TITLE;
const userStore = useUserStore();
const router = useRouter();
import { definePage } from 'unplugin-vue-router/runtime'
definePage({
  meta: {
    layout: 'blank',
    public: true,
  },
})

const refVForm = ref()

const errors = ref({
  email: undefined,
  password: undefined,
})

const form = ref({
  email: '',
  userType:'00',
  password: '',
  remember: false,
})
async function onSubmit() {
  try{
    await refVForm.value?.validate()
    const params = {
      username: form.value.email,
      password: form.value.password,
      userType: form.value.userType
    }
    const {token, msg} = await login.login( params )
    useCookie('accessToken').value = token
    const {permissions, roles, user} = await login.getInfo()
    storage.setItem('permissions', permissions)
    storage.setItem('roles', roles)
    storage.setItem('user', user)    
    storage.setItem('navType', form.value.userType)    
    await nextTick(() => {   
      ElMessage.success('登录成功')
      router.push('/')
      console.log(router,'-------');
      
    })

  }catch(e) {
    return ElMessage.error('登录失败')
    console.log(e, 'errr')
  }
}



const isPasswordVisible = ref(false)


const apexList = [
  {
    title: '平台端',
    value: '00'
  },
  {
    title: '教师端',
    value: '01'
  },
  {
    title: '学生端',
    value: '02'
  }
]
</script>

<style lang="scss">
@use "@core/scss/template/pages/page-auth";

.auth-wrapper {
  background-color: #f4f5fa;
}

.logo-box {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  margin-top:25px;
  margin-left:40px;
}

.logo-title {
  line-height: 50px;
  font-size: 24px;
  color:#000;
}
.bg-box {
  width:100%;
  height:calc(100vh - 75px);
  background-image: url("@/assets/images/login-center-img.png"),url("@/assets/images/Mask.png"),url("@/assets/images/Tree.png");
  background-size: 80% 80%,100% 40%,15% 20%;
  background-position: center center,center bottom,150px 480px;
}
.d-md-flex{
  flex-direction: column;
}
</style>